<template>
    <PageLayout type="opt">
        <el-form ref="formRef" :model="optInfo" label-position="top" class="flex-form" :rules="rules">
            <FormTitle>{{t("baseInfoTitle")}}</FormTitle>
            <FormItem :label="t('userName')" col="1" prop="userName" warning="身份证上的姓名">
                <el-input v-model="optInfo.userName" />
            </FormItem>
            <FormItem :label="t('age')" col="1" prop="age">
                <el-input type="text" v-model="optInfo.age" />
            </FormItem>
            <FormItem label="性别" col="1">
                <el-radio-group v-model="optInfo.gender">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="2">女</el-radio>
                </el-radio-group>
            </FormItem>
            <FormItem label="手机号" col="1" prop="telephone">
                <el-input v-model="optInfo.telephone" />
            </FormItem>
            <FormItem label="出生日期" col="1" prop="birthday">
                <el-date-picker v-model="optInfo.birthday" type="date" placeholder="请选择" />
            </FormItem>
            <FormItem label="是否毕业" col="1" prop="graduate">
                <el-radio-group v-model="optInfo.graduate">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </FormItem>
            <FormItem label="毕业院校" col="1" tip="最高学历的毕业院系">
                <el-input v-model="optInfo.school" />
            </FormItem>
            <FormItem label="最高学位" col="1" tip="只支持统招">
                <el-select v-model="optInfo.degree">
                    <el-option v-for="item in degreeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
            </FormItem>

            <FormItem label="民族" col="1">
                <el-input v-model="optInfo.nation" />
            </FormItem>
            <FormItem label="工作单位" col="2">
                <el-input v-model="optInfo.unit" />
            </FormItem>
            <FormItem label="家庭住址" col="2">
                <el-input v-model="optInfo.address" />
            </FormItem>
            <FormItem label="文件上传" col="4">
                <FileList :uploadPath="FileUploadPath" v-model:list="fileList" title="请选择附件" :opt="true"
                    :preview-path="PreviewFilePath" :download-path="DownloadFilePath">

                </FileList>
            </FormItem>
            <FormItem label="图片上传" col="2">
                <ImageList :uploadPath="uploadImageUrl" :limit="8" :opt="true" v-model:list="imageList" />
            </FormItem>
            <FormItem label="头像上传" col="2">
                <Avatar :uploadPath="uploadImageUrl" v-model="optInfo.avatar" :opt="true"  />
            </FormItem>

            <FormItem label="个人简介" col="4">
                <el-input v-model="optInfo.memo" type="textarea" />
            </FormItem>

            <FormItem label="成员选择" col="4">
                <UserSelect
                :loadDataApi="UserApi"
                :multiple="true"
                v-model="UserSelectVal"
                ></UserSelect>
            </FormItem>
            <FormItem col="4" label="个人简介富文本">
                <Editor v-model="optInfo.memo" :uploadImagePath="uploadImageUrl" placeholder="请填写个人信息" />
            </FormItem>
            <FormItem col="4">
                <div class="form-opts">
                    <el-button type="primary" @click="tapCommit">提交</el-button>
                </div>
            </FormItem>
        </el-form>
    </PageLayout>
</template>

<script setup name="OptDemo">
import { reactive, ref } from "vue";
import { FormateDate, SuccessAjax, CopyProperty } from "hongshu-view";
import api from "~api";
import { createRouter, createRoute } from "~Router";
import { uploadImageUrl } from "~public/tools/ImageTool";
import { FileUploadPath, PreviewFilePath, DownloadFilePath, AuthFileUploadPath } from "~public/tools/FileTool";
import {degreeList} from "./conf";
import {Requried,RequriedSelect,RegTelephone,RequriedDate,RegPositiveInteger,LimitLength} from "~Rules";

import {UserApi } from "~tools/ApiTool";
import {ShortLocale} from "~tools/LocaleTool";

const t = ShortLocale("pages.opt_demo");

const UserSelectVal = ref([]);


let optType = "add";
let mainId = "";
const formRef = ref(null);

const router = createRouter();
let { query } = createRoute();
optType = query.optType;


const fileList = ref([]);
const imageList = ref([]);
const optInfo = reactive({
    id: "",
    userName: "",
    age: "",
    gender: "",
    birthday: "",
    school: "",
    address: "",
    nation: "",
    unit: "",
    memo: "",
    graduate: "",
    imageList: "",//
    fileList: "",
    degree: "",
    telephone:"",
    avatar:"",
});



const loadInfo = () => {
    SuccessAjax(api.getById + "/" + mainId, {}, {
        method: "get"
    }).then(({ data }) => {
        // console.log(data);
        CopyProperty(optInfo, data);
        data.imageList &&(imageList.value = JSON.parse(data.imageList));
        data.fileList  && (fileList.value = JSON.parse(data.fileList))
    });
}

if (optType == "edit") {
    mainId = query.id;
    loadInfo();
};

const rules = reactive({
    userName: [Requried],
    age:[RegPositiveInteger],
    birthday:[RequriedDate],
    telephone:[RegTelephone],
});


const tapCommit = () => {
    formRef.value.validate((flag, fields) => {
        if (!flag) {
            return;
        }

        let param = {
            ...optInfo,
            imageList:imageList.value.length >0?JSON.stringify(imageList.value):"",
            fileList:fileList.value.length >0?JSON.stringify(fileList.value):"",
            birthday: FormateDate(optInfo.birthday, "YYYY-MM-DD")
        };
        // console.log(param)
        let url = api.save;
        let method = "post";
        if (optType == "edit") {
            url = api.edit;
            method = "put";
        }
        SuccessAjax(url, param, {
            successMsg: true,
            method
        }).then(() => {
            router.go(-1);
        });
    });
}

</script>

<style lang="less" scoped></style>